<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="d1">
        <p>{{msg}}</p>
        <p>{{msg.split(' ').reverse().join(' ').toUpperCase()}}</p>
        <p>{{reverseMsg}}</p>

        <button @click="msg='Hello'">修改</button>

        <p>{{num}}</p>
        <p>{{doubleNum}}</p>

        <button @click="doubleNum=6">修改</button>
    </div>
    <script>

        new Vue({
            el: "#d1",
            data:{
                msg:"Welcome to Vue",
                num:2
            },
            methods:{

            },
            computed:{
                reverseMsg(){
                    return this.msg.split(' ').reverse().join(' ').toUpperCase();
                },
                // doubleNum(){
                //     return this.num*2;
                // }
                doubleNum:{
                    get(){
                        return this.num*2;
                    },
                    set(value){
                        this.num=value/2;
                    }
                }
            }
        });
    </script>
</body>
</html>